<template>
  <div class="zong">
    <!-- 上边两个图表 -->
    <div class="top">
      <div class="lefttop">
        <div class="title">工单数量</div>
        <!-- 选择框，输入框 -->
        <div class="block">
          <el-select v-model="work" @change="a" class="xz" placeholder="请选择" size="small">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-date-picker v-model="worktime" value-format="YYYY-MM-DD" type="daterange" @change="a"
            style="width:250px; height:23px;margin-left:10px;" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" />
        </div>
        <!-- 左侧文字 -->
        <div class="left">
          <p>今年 <span style="font-size:20px; color:#277bcb;">128</span> 次</p>
          <p>本月 <span style="font-size:20px; color:#277bcb;">15</span>次</p>
          <p>昨日 <span style="font-size:20px; color:#277bcb;">8</span>次</p>
        </div>
        <!-- 绘制图表 -->
        <div id="a" style="height: 280px; width: 600px;margin-left:80px; margin-top:-170px;"></div>
      </div>
      <div class="lefttop" style="margin-left:20px;">
        <div class="title">故障数量分布</div>
        <!-- 绘制图表 -->
        <div id="b" style="height: 300px; width: 700px "></div>
      </div>
    </div>
    <!-- 下边两个图表 -->
    <div class="top" style="margin-top:20px;">
      <div class="lefttop">
        <div class="title">风险严重程度统计</div>
        <div style="display:flex;">
          <div>
            <!-- 绘制图表饼形图 -->
            <div id="c" style="height: 230px; width: 300px;margin-left: 100px; "></div>
          </div>
          <div>
            <div class="risk">
              <!-- 绘制图表折线图 -->
              <el-date-picker v-model="risk" type="daterange" style="width:250px; height:23px;" range-separator="至"
                start-placeholder="开始时间" end-placeholder="结束时间" />
            </div>
            <div id="c1" style="height: 250px; width: 450px;margin-top:20px; "></div>
          </div>
        </div>
      </div>
      <div class="lefttop" style="margin-left:20px;">
        <div class="title">故障率趋势</div>
        <div class="trend">
          <el-date-picker v-model="trend" type="daterange" style="width:250px; height:23px;margin-left:10px;"
            range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
        </div>
        <!-- 绘制图表 -->
        <div id="d" style="height: 230px; width: 600px;margin-left:20px; "></div>
      </div>
    </div>
    <!-- 最下边一个图表 -->
    <div class="lefttop" style="margin-top:20px; height:320px;">
      <div class="title">预防性维护占比</div>
      <div class="trend">
        <el-date-picker v-model="maintain" @change="e" type="monthrange" align="right"
          style="width:250px; height:23px;margin-left:0px;" unlink-panels range-separator="至" start-placeholder="开始月份"
          end-placeholder="结束月份">
        </el-date-picker>
      </div>
      <!-- 绘制图表 -->
      <div id="e" style="height: 270px; width: 600px;margin-left:20px; margin-top:20px;"></div>
    </div>
    <!-- <button @click="reactYear">111</button> -->
  </div>
</template>
<script >
import { ref, reactive, onMounted, onBeforeUpdate } from 'vue'
import * as echarts from "echarts";
import { ProjectGroupone } from '@/api/model/echarts'
export default {
  setup() {
    const work = ref('')
    const trend = ref('')
    const maintain = ref('')
    const risk = ref('')
    const worktime = ref('请选择')

    const options = reactive([
      {
        value: '所有',
        label: '所有',
      },
      {
        value: '冷冻机',
        label: '冷冻机',
      },
      {
        value: '冷冻泵',
        label: '冷冻泵',
      },
      {
        value: '冷却泵',
        label: '冷却泵',
      },
      {
        value: '冷却塔',
        label: '冷却塔',
      },
      {
        value: 'BA',
        label: 'BA',
      },
    ])
    let state = reactive({
      asd : [
        ['product', '2019', '2020', '2021', '2022'],
        ['制冷机', 1, 1, 1, 1],
        ['冷却泵', 1, 1, 1, 1],
        ['冷冻泵', 1, 1, 1, 1],
        ['冷却塔', 1, 1, 1, 1],
      ],
      asd1: [
        ['product', '2019', '2020', '2021', '2022'],
        ['制冷机', 43, 85, 93, 85],
        ['冷却泵', 83, 73, 55, 85],
        ['冷冻泵', 86, 65, 82, 85],
        ['冷却塔', 72, 53, 39, 85]
      ],
      shuju:[
        ['product', '2019', '2020', '2021', '2022']
      ],
      b: {
        indicatorName: "故障数量分布",
        firstType: "数据分析",
        secondType: "",
        type: "year",
        thirdType: "",
        dataType: "year",
        dayFrom: "1900-01-01",
        dayTo: "2023-01-02"

      },
        d: {
        indicatorName: "故障率趋势",
        firstType: "数据分析",
        secondType: "",
        type: "year",
        thirdType: "",
        dataType: "year",
        dayFrom: "1900-01-01",
        dayTo: "2023-01-02"

      },
      byear: [],
      typename: []
    })
    onMounted(() => {
      getdatab()
    })

    const getdatab = async () => {
      let res = await ProjectGroupone(state.b)
      console.log(res, '故障');
      let data1 = []
      let arr1 = []
      let arr2 = []
      let arr3 = []
      let arr4 = []
      let da = []
      res.data.indicatorList.forEach(item => {
        da.push(item.secondType)
      })
      res.data.commonDailyDataList.forEach((item) => {
        data1.push(`${item.day.substring(0, 4)}`)
        if (item.type == "type1") {
          arr1.push(item.number1)
        } else if (item.type == "type2") {
          arr2.push(item.number1)
        } else if (item.type == "type3") {
          arr3.push(item.number1)
          arr4.push(item.number1)
        }
        else if (item.type == "type3") {
          arr4.push(item.number1)
        }
      })
      let shuju = [
        ['product', '2019', '2020', '2021','2022']
      ]
      let a = da.splice(0, 4)
      console.log(a);
      let data = da.splice(0, 3)
      console.log(data);
      let arrays = [arr1.splice(0, 4), arr2.splice(0, 4), arr3.splice(0, 4), arr4.splice(0, 4)]
      console.log(arrays);
      for (var i = 0; i < a.length; i++) {
        shuju.push([a[i], ...arrays[i]])
      }
      state.shuju = shuju
      console.log(state.shuju,'ressssssssssssssssssssssssss');

      res.data.indicatorList.forEach((item) => {
        state.typename.push(item.secondType)
      }
      )  
    }

    function a() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("a"));
      myChart.setOption({
        legend: {
          left: 20,
          orient: "horizontal",
          data: ["工单", "数量"],
        },
        xAxis: {
          type: "category",
          data: ["4/20", "4/21", "4/22", "4/23", "4/24", "4/25", "4/26", "4/27", "4/28", "4/29", "4/30", "4/31",],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "工单",
            type: "line",
            data: ["12", "14", "10", "14", "10", "12", "13", "8", "11", "10", "11", "13",],
            // 线条覆盖颜色
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                  [
                    {
                      offset: 0,
                      color: "#fdf1ce",
                    },
                    {
                      offset: 1,
                      color: "#dae3d3",
                    },
                  ],
                  false
                ),
              },
            },
            // 线条颜色
            itemStyle: {
              normal: {
                color: "#f7b851",
              },
            },
            // 线条宽度
            lineStyle: {
              normal: {
                width: 3,
              },
            },
          },
          {
            name: "数量",
            type: "line",
            data: ["12", "14", "8", "8", "6", "4", "15", "11", "5", "3", "7", "8",],
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                  [
                    {
                      offset: 0,
                      color: "#d8e9f5",
                    },
                    {
                      offset: 1,
                      color: "#d8e9f5",
                    },
                  ],
                  false
                ),
              },
            },
            itemStyle: {
              normal: {
                color: "#479bd0",
              },
            },
            lineStyle: {
              normal: {
                width: 3,
              },
            },
          },
        ],
      });
    }
   async function b() {
      let res = await ProjectGroupone(state.b)
      console.log(res, '故障');
      let data1 = []
      let arr1 = []
      let arr2 = []
      let arr3 = []
      let arr4 = []
      let da = []
      res.data.indicatorList.forEach(item => {
        da.push(item.secondType)
      })
      res.data.commonDailyDataList.forEach((item) => {
        data1.push(`${item.day.substring(0, 4)}`)
        if (item.type == "type1") {
          arr1.push(item.number1)
        } else if (item.type == "type2") {
          arr2.push(item.number1)
        } else if (item.type == "type3") {
          arr3.push(item.number1)
          arr4.push(item.number1)
        }
        else if (item.type == "type3") {
          arr4.push(item.number1)
        }
      })
      let shuju = [
        ['product', '2019', '2020', '2021','2022']
      ]
      let a = da.splice(0, 4)
      console.log(a);

    
      let data = da.splice(0, 3)
      console.log(data);
  
      let arrays = [arr1.splice(0, 4), arr2.splice(0, 4), arr3.splice(0, 4), arr4.splice(0, 4)]
      console.log(arrays);
      for (var i = 0; i < a.length; i++) {
       
        shuju.push([a[i], ...arrays[i]])
      }
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("b"));
      myChart.setOption({
        legend: {
        },
        tooltip: {},
        dataset: {
     
          source:shuju
        },
        xAxis: {
          type: 'category',
          // data: ['']
        },
        yAxis: {},
        series: [{ type: 'bar', color: '#90cd50' }, { type: 'bar', color: '#ffc000' }, { type: 'bar', color: '#d6ebfa' }, { type: 'bar', color: '#0070c0' }]
      });
    }
    function c() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("c"));
      myChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          data: ['高', '中', '低'],
          left: 'center',
          top: 'bottom'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '高' },
              { value: 735, name: '中' },
              { value: 300, name: '低' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })

      // 基于准备好的dom，初始化echarts实例
      let myChart1 = echarts.init(document.getElementById("c1"));
      myChart1.setOption({
        legend: {
          left: 20,
          orient: "horizontal",
          data: ["高", "中", "低"],
        },
        xAxis: {
          type: 'category',
          data: ["4/20", "4/21", "4/22", "4/23", "4/24", "4/25", "4/26", "4/27", "4/28", "4/29", "4/30", "4/31"],
          axisLabel: {
            rotate: 45,
          },
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '高',
            data: [0, 3, 2, 6, 8, 4, 6, 3, 5, 3, 2, 1],
            type: 'line'
          },
          {
            name: '中',
            data: [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
            type: 'line'
          },
          {
            name: '低',
            data: [1, 2, 3, 3, 2, 3, 1, 2, 4, 3, 6, 5],
            type: 'line'
          }
        ]
      })
    }
    async function d() {
      let datato = '1900-01-01'
      let datafrom = '2023-01-02'
      let a = []
      let b = []
      let c = []
      let d = []
      let e = []
      if (typeof (e) == Object) {
        datato = e[0].substring(0, 4)
        datafrom = e[1].substring(0, 4)
      }

      let res = await ProjectGroupone({
        "indicatorName": "故障率趋势",
        "firstType": "数据分析",
        "secondType": '',
        "thirdType": "",
        "dataType": "day",
        "dayFrom": datato,
        "dayTo": datafrom
      })
      res.data.commonDailyDataList.forEach((item) => {
        a.push(`${item.day.substring(6, 7)}/${item.day.substring(8, 10)}`)
        a = [...new Set(a)]
        b.push(item.number1)
        if (item.type == 'type1') {
          c.push(item.number1)
        }
        if (item.type == 'type2') {
          d.push(item.number1)
        }
        if (item.type == 'type3') {
          e.push(item.number1)
        }
      })
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("d"));
      myChart.setOption({
        legend: {
          left: 50,
          data: ['所有', '冷冻机', '冷冻泵', '冷却泵', '冷却塔']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: a
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '所有',
            type: 'line',
            stack: 'Total',
            data: b
          },
          {
            name: '冷冻机',
            type: 'line',
            stack: 'Total',
            data: c
          },
          {
            name: '冷冻泵',
            type: 'line',
            stack: 'Total',
            data: d
          },
          {
            name: '冷却泵',
            type: 'line',
            stack: 'Total',
            data: e
          },
          {
            name: '冷却塔',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320, 122, 322, 1231, 213, 231]
          }
        ]
      });
    }
    async function e(e) {
      console.log(e, 'ccccccccccccccccccccccccccccc');
      let datato = '1900-01-01'
      let datafrom = '2023-01-02'
      let a = []
      let b = []
      if (typeof (e) == Object) {
        datato = e[0].substring(0, 4)
        datafrom = e[1].substring(0, 4)
      }

      let res = await ProjectGroupone({
        "indicatorName": "预防性维护占比",
        "firstType": "数据分析",
        "secondType": '',
        "thirdType": "",
        "dataType": "day",
        "dayFrom": datato,
        "dayTo": datafrom
      })
      res.data.commonDailyDataList.forEach((item) => {
        a.push(`${item.day.substring(6, 7)}/${item.day.substring(8, 10)}`)
        a = [...new Set(a)]
        b.push(item.number1)
      })

      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("e"));
      myChart.setOption({
        xAxis: {
          type: 'category',
          data: a,
          axisLabel: {
            rotate: 45,
          },
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: b,
            type: 'line',
          }
        ]
      })
    }
    // 获取前12月月份函数
    function reactYear() {
      var d = new Date();
      var result = [];
      for (var i = 0; i < 12; i++) {
        d.setMonth(d.getMonth() - 1);
        var m = d.getMonth();
        m = m < 10 ? "0" + m : m;
        //在这里可以自定义输出的日期格式
        //					result.push(d.getFullYear() + "-" + m);
        result.push(d.getFullYear() + "." + m);
      }
      // console.log(result, 2222222222);
      return result;
    }
    onMounted(() => {
      a(), b(), c(), d(), e()
    })
    onBeforeUpdate(() => {
    })
    return {
      work, trend, maintain, risk, worktime, options, a, b, c, d, e, reactYear,
    }
  },
}
</script>

<style scoped>
.block {
  margin-left: 400px;
  display: flex;
  margin-left: 240px;
  margin-top: 15px;
}

.top {
  display: flex;
}

.risk {
  position: relative;
  top: 20px;
  left: 150px;
}

.zong {
  /* background-color: #e5edf7; */
  height: 1000px;
  width: 100%;
}

.trend {
  position: relative;
  left: 450px;
  top: 25px;
}

.left p {
  font-size: 12px;
  margin-top: 30px;
}

.lefttop {
  width: 49%;
  /* width: 750px; */
  height: 300px;
  background-color: white;
  border-radius: 20px;
}

.left {
  position: relative;
  left: 155px;
  top: 10px;
}

.title {
  font-size: 18px;
  font-weight: 550;
  color: #4d62a5;
  padding-left: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f2f3f8;
}

.xz {
  width: 100px;
  background: #c0cfe3;
  margin-left: 90px;
  border-radius: 10px;
  color: #c0cfe3;
}
</style>
